<!--
 * @Author: GEOWAY\zhaoweiwen 2565088230@qq.com
 * @Date: 2022-10-09 10:24:51
 * @LastEditors: GEOWAY\zhaoweiwen 2565088230@qq.com
 * @LastEditTime: 2022-10-09 10:52:23
 * @FilePath: \map-js-demo\leafletdemo\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leafletdemo</title>
    <link href="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.js"></script>
</head>

<body>

    <h2>leaflet demo</h2>
    <div id="map" style="width:700px;height: 600px;"></div>
</body>

</html>
<script>
    // mapbox 地图服务URL
    var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoid2VuMTIzIiwiYSI6ImNrOGJpMWhnbzA4eTIzZG8xOXQzZmU5YmQifQ.T1W9vkW6bhbMN1gt5xCG5A';

    // 定义两个图层，影像图层和街道图层（这里是有了mapbox地图服务）
    // 第三个参数，版权信息mapAttr
    // 自定义版权信息（简单的html字符串,你也可以简单的写文本）
    var mapAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">练习</a> contributors, ' +
        '<a href="http://giscafer.com/">giscafer</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
    var satellite = L.tileLayer(mapboxUrl, { id: 'mapbox.satellite', attribution: mapAttr });
    var streets = L.tileLayer(mapboxUrl, { id: 'mapbox.streets', attribution: mapAttr });
    // 创建地图实例
    var map = L.map('map', {
        center: [18.7, 119.3],
        zoom: 5,
        // 展示`影像图` 和 `街道图` 两个图层
        layers: [satellite, streets]
    });
    // 通过layer control来实现图层切换UI
    // https://leafletjs.com/examples/layers-control/
    var baseLayers = {
        "影像图": satellite,
        "街道图": streets
    };
    L.control.layers(baseLayers).addTo(map);

</script>